import React, {Component} from 'react';
import {Button, Dropdown, Icon, Menu, Popconfirm, message, Popover} from "antd";
import {messages, deepFullCopy} from "share/common";
import Info from "components/info";
import Condition from "components/condition";
import ResizeTable from "components/resize-table";
import ListSelector from "components/list-selector";
import "styles/finance-setting/tax-code/tax-code/invoice-type/expense-invoice-mapping.scss";

const { SubMenu } = Menu;
const { If, Else, ElseIf } = Condition;

class AssociatedList extends Component {

  filterData = (data, listType) => {
    return deepFullCopy((data || []).map(item => {
      item.listType = listType;
      return item;
    }))
  };

  state = {
    loading: false,
    columns: [{
      dataIndex: 'listCode',
      title: messages('expense-14.key528')/*编码*/,
      width: '20%'
    }, {
      dataIndex: 'listName',
      title: messages('expense-14.key529')/*名称*/,
      render: value => value ? <Popover content={value} placement="topLeft">{value}</Popover> : '-'
    }, {
      dataIndex: 'listDesc',
      title: messages('expense-14.key530')/*描述*/,
      render: value => value ? <Popover content={value} placement="topLeft">{value}</Popover> : '-'
    }, {
      dataIndex: "expReceiptMappingListId",
      title: messages('common.operation')/*操作*/,
      width: "20%",
      render: (value, record) => !this.props.disabled ? (
        <Popconfirm
          onConfirm={() => this.handleDelete(value, record.listType)}
          title={messages('common.confirm.delete')/*确定要删除吗？*/}
        >
          <a>{messages('common.delete')/*删除*/}</a>
        </Popconfirm>
      ) : '-'
    }],
    whiteListData: this.filterData(this.props.record.whiteList, 'WHITE'),
    blackListData: this.filterData(this.props.record.blackList, 'BLACK'),
    listType: '',
    blackListType: this.props.record.blackListType || 'BLACK', // 黑名单范围
    listSelectorVisible: false,
  };

  infoData = {
    attributes: [
      { title: messages('expense-14.key536')/*白名单*/, dataIndex: 'white', span: 24, widthFix: false },
      { title: messages('expense-14.key537')/*黑名单*/, dataIndex: 'black', span: 24, widthFix: false },
      { title: messages('expense-14.key548')/*灰名单*/, dataIndex: 'gray', span: 24, widthFix: false }
    ],
    dataSource: {
      white: messages('expense-14.key549')/*发票推荐相关的费用类型*/,
      black: messages('expense-14.key550')/*发票禁止报销*/,
      gray: messages('expense-14.key551')/*发票弱管控并标记【发票不一致】，关联黑白名单后，自动生成灰名单*/
    }
  };

  handleDelete = (expReceiptMappingListId, listType) => {
    let { whiteListData, blackListData } = this.state;
    if (listType === 'WHITE') {
      whiteListData.deleteObj({ expReceiptMappingListId }, 'expReceiptMappingListId');
    } else {
      blackListData.deleteObj({ expReceiptMappingListId }, 'expReceiptMappingListId');
    }
    this.setState({ whiteListData, blackListData })
  };

  handleMenuClick = e => {
    if (['CUSTOM', 'BLACK', 'GREY'].includes(e.key)) {
      this.setState({
        blackListType: e.key,
        blackListData: []
      })
    }
    if (['WHITE', 'CUSTOM'].includes(e.key)) {
      this.setState({
        listSelectorVisible: true,
        listType: e.key === 'CUSTOM' ? 'BLACK' : e.key
      })
    }
  };

  handleAddBlackOrWhite = ({ result }) => {
    if (!(result && result.length)) {
      message.error(messages('common.select')/*请选择*/);
      return;
    }
    const { listType } = this.state;
    result.map(item => {
      item.listType = listType;
    });
    this.setState({
      listSelectorVisible: false,
      [listType === 'WHITE' ? 'whiteListData' : 'blackListData']: result
    })
  };

  renderOverlayMenu = () => (
    <Menu className="associated-list-menu" onClick={this.handleMenuClick}>
      <Menu.Item key="WHITE">
        {messages('expense-14.key536')/*白名单*/}
      </Menu.Item>
      <SubMenu title={messages('expense-14.key537')/*黑名单*/} className="associated-list-subMenu">
        <Menu.Item key="CUSTOM">{messages('expense-14.key552')/*自定义黑名单*/}</Menu.Item>
        <Menu.Item key="BLACK">{messages('expense-14.key553')/*除白名单外均为黑名单*/}</Menu.Item>
        <Menu.Item key="GREY">{messages('expense-14.key554')/*除白名单外均为灰名单*/}</Menu.Item>
      </SubMenu>
    </Menu>
  );

  render() {
    const { disabled } = this.props;
    const { loading, columns, whiteListData, blackListData, blackListType, listSelectorVisible, listType } = this.state;
    return (
      <div className="associated-list">
        <Info
          paragraph
          dataSource={this.infoData.dataSource}
          attributes={this.infoData.attributes}
        />
        <If value={!disabled}>
          <Dropdown trigger={["click"]} overlay={this.renderOverlayMenu()}>
            <Button type="primary" style={{ marginTop: 12 }}>
              {messages('common.add')/*添加*/}<Icon type="down"/>
            </Button>
          </Dropdown>
        </If>
        <div className="associated-list-header white">{messages('expense-14.key536')/*白名单*/}</div>
        <ResizeTable
          rowKey="expReceiptMappingListId"
          columns={columns}
          dataSource={whiteListData}
          loading={loading}
          pagination={false}
          size="middle"
          bordered
        />
        <div className="associated-list-header">{messages('expense-14.key537')/*黑名单*/}</div>
        <Condition>
          <If value={blackListType === 'CUSTOM'}>
            <ResizeTable
              rowKey="expReceiptMappingListId"
              columns={columns}
              dataSource={blackListData}
              loading={loading}
              pagination={false}
              size="middle"
              bordered
            />
          </If>
          <ElseIf value={blackListType === 'BLACK'}>
            <div className="font-description">{messages('expense-14.key553')/*除白名单外均为黑名单*/}</div>
          </ElseIf>
          <Else>
            <div className="font-description">{messages('expense-14.key554')/*除白名单外均为灰名单*/}</div>
          </Else>
        </Condition>
        <div className="associated-list-header">{messages('expense-14.key548')/*灰名单*/}</div>
        <div className="font-description">{messages('expense-14.key555')/*灰名单为白名单和黑名单外的发票，灰名单发票弱管控，保存费用后标记【发票不匹配】*/}</div>

        <ListSelector
          visible={listSelectorVisible}
          type="blackWhiteList"
          selectedData={listType === 'WHITE' ? whiteListData: blackListData}
          extraParams={{ listType }}
          onOk={this.handleAddBlackOrWhite}
          onCancel={() => this.setState({ listSelectorVisible: false })}
        />

      </div>
    );
  }
}

export default AssociatedList;
